<script setup>
import { modelFormProps } from './form';
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption } from 'element-plus';

const props = defineProps(modelFormProps);

defineEmits(['update:modelValue', 'reload-table-data']);
</script>
<template>
  <ElForm v-bind="{ ...$attrs, ...props }">
    <slot></slot>
    <template v-for="item in props.formItems" :key="item.prop">
      <ElFormItem v-if="!item.hidden" v-bind="{ ...item }">
        <ElInput
          v-if="!item.slotName && !item.type"
          v-model="model[item.prop]"
          class="w-full min-w-192px"
          @keyup.enter="() => $emit('reload-table-data', model)"
        />
        <template v-else-if="item.type === 'select'">
          <ElSelect
            v-model="model[item.prop]"
            class="w-full min-w-192px"
            clearable
            :multiple="item.multiple"
            @change="() => $emit('reload-table-data', model)"
          >
            <ElOption v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value" />
          </ElSelect>
        </template>
        <template v-if="item.slotName" #default>
          <slot :name="item.slotName" :scope="item"></slot>
        </template>
      </ElFormItem>
    </template>

    <template v-if="$slots.footer">
      <ElFormItem>
        <slot name="footer"></slot>
      </ElFormItem>
    </template>
  </ElForm>
</template>
<style lang="scss" scoped></style>
